<template>
	<div class="common-layout">
		<el-container>
			<el-header height="auto">
				<!-- <Header></Header> -->
				<Search
					ref="refSearch"
					str1="订单金额高"
					str2="订单件数高"
					str4="今日订单数"
					str5="500单"
					str3="请输入订单ID或买家信息"
					str6="累计订单总数"
					str7="5000单"
					@myEvent="mySearch"
					@reset="reset"
				>
					<div class="block">
						<IocnFont
							iconName="icon-shaixuan"
							color="rgb(45,72,195)"
						></IocnFont>
						<span class="option">筛选</span>

						<el-form :model="form" label-width="120px">
							<el-form-item label="结算状态">
								<el-select v-model="form.region" placeholder="请选择结算状态">
									<el-option label="已结算" value="已结算" />
									<el-option label="未结算" value="未结算" />
								</el-select>
							</el-form-item>
							<el-form-item label="订单状态">
								<el-select v-model="form.name" placeholder="请选择订单状态">
									<el-option label="待发货" value="待发货" />
									<el-option label="待收货" value="待收货" />
									<el-option label="已完成" value="已完成" />
									<el-option label="已失效" value="已失效" />
								</el-select>
							</el-form-item>
						</el-form>
					</div>
				</Search>
			</el-header>
			<el-main>
				<Main></Main>
			</el-main>
			<Footer
				ref="refFooter"
				str1="今日订单"
				str2="所有订单"
				:num1="1"
				:num2="state.total"
				:page-sizes="searchInfo[1]"
				:total="state.total"
				@toExcel="toExcel"
				@myEvent="pageHome"
				@myEvent2="pageNext"
				@myEvent3="pagePrev"
				@changePage="changePage"
			></Footer>
		</el-container>
	</div>
</template>

<script setup>
// import Header from "./order/Header.vue";
import Search from "../components/Search.vue";
import Main from "./order/Main.vue";
import Footer from "../components/Footer.vue";
import { ref, reactive, onMounted } from "vue";
// 引入阿里图标
import IocnFont from "@/components/IocnFont.vue";
// 引入数据接口
import { changeStatus, getDetails, getOrderList } from "@/api/Order.js";
// 引入仓库
import orderStore from "../stores/order.js";

// 引入导出Excel工具
import { htmlToExcel } from "../utils/htmlToExcel";
import { indexOf } from "lodash";
//引入仓库模拟数据
// import orderStore1 from "../stores/Ordermodel.js";

// 解构出仓库中的数据
const { state } = orderStore();

// // 解构出仓库的模拟数据
// const { orderData1 } = orderStore1();

const form = reactive({
	name: "",
	region: "",
	date1: "",
	date2: "",
	delivery: false,
	type: [],
	resource: "",
	desc: "",
});
// 获取search组件实例
const refSearch = ref(null);
// 获取底部footer的组件实例
const refFooter = ref(null);

const searchInfo = [
	1,
	8,
	{
		// 按照订单号或者买家电话号码搜索
		kw: "",
		// string按照订单金额降序排序，请输入1表示需要排序
		orderAmountSort: "",
		// string按照订单件数降序排序，请输入2表示需要排序
		orderNumberSort: " ",
		// string这个参数为订单状态，0表示待发货，1表示已经待收货，2表示已完成，3表示已失效
		orderStatus: "",
		// string 这个参数为结算状态，0表示未结算，1表示已经结算
		settlementStatus: "",
	},
];

/**
 * 生命周期函数钩子
 */
onMounted(() => {
	// 数据初始化
	searchInfo[0] = refFooter.value.pageNum;
	startReq(...searchInfo);
});

/**
 *@function startReq  函数封装请求接口数据
 */
function startReq(...searchInfo) {
	getOrderList(...searchInfo)
		.then((res) => {
			state.total = res.data.total;
			state.orderData = upData(res.data.all);
		})
		.catch((error) => {
			console.log(error);
		});
}
/**
 * @function upData 将数据接口当中的数据进行加工处理
 * @param  arr
 */
function upData(arr) {
	const orderData = [];
	if (arr.length !== 0) {
		arr.forEach((item, index) => {
			const obj = {};
			for (let key in item.orderitem) {
				obj[key] = item.orderitem[key];
				if (key === "settlementstatu") {
					obj[key] = state.orderStatus[Number(item.orderitem[key])];
				}
				if (key === "systemstate") {
					obj[key] = state.settleStatus[Number(item.orderitem[key])];
				}
			}
			obj.buyers = item.user;
			obj.income = 10.0;
			orderData.push(obj);
		});
	}
	// console.log(orderData);
	return orderData;
}
/*
 ** 重置函数
 */
function reset() {
	form.region = "";
	form.name = "";
}
/**
 * @function toExcel  一键导出成为Excel表格
 *
 */
function toExcel() {
	htmlToExcel("#table2", "订单");
}
/**
 * @function pageHome 点击回到首页的按钮回到首页
 */
function pageHome() {
	// 首页--第一页
	searchInfo[0] = 1;
	// 重新调用数据接口将其渲染在页面上
	startReq(...searchInfo);
}
/**
 * @function pageNext 点击切换下一页
 */
function pageNext(page) {
	// console.log(refFooter.value.pageNum);
	searchInfo[0] = page;
	startReq(...searchInfo);
}
/**
 * @function  pagePrev 点击切换上一页
 */
function pagePrev(page) {
	// console.log(page);
	searchInfo[0] = page;
	startReq(...searchInfo);
}
/**
 * @function changePage 改变页面
 * @param  page 接受当前页面参数
 */
function changePage(page) {
	// console.log(page);
	searchInfo[0] = page;
	startReq(...searchInfo);
}
/**
 * @param mySearch,搜索按钮的函数，点击搜索完成联动
 */
function mySearch() {
	// 搜索输入框中的内容--refSearch.value.goods
	// console.log(state.settleStatus.indexOf(form.region));
	searchInfo[2].kw = refSearch.value.goods;
	searchInfo[2].settlementStatus = state.settleStatus.indexOf(form.region);
	searchInfo[2].orderStatus = state.orderStatus.indexOf(form.name);
	console.log(searchInfo[2]);
	// 点击查询的时候
	getOrderList(...searchInfo)
		.then((res) => {
			// console.log();
			// console.log(state.orderData[0]);
			state.orderData = upData(res.data.all);
			state.total = res.data.total;
			// console.log(res.data);
		})
		.catch((error) => {
			console.log(error);
		});
}
</script>

<style lang="less" scoped>
.common-layout {
	width: 100% !important;
	height: 100vh;
	box-sizing: border-box;
	.el-main,
	.el-header {
		padding: 20px 0;
	}

	:deep(.search .content .left .select) {
		margin: 0;
	}
	:deep(.search .content .left .seek) {
		margin: 0;
	}
	.block {
		display: flex;
		font-weight: bold;
		align-items: center;
		margin-left: 18px;
		.option {
			width: 39.998px;

			margin-left: 14px;
		}
		form {
			margin-top: 20.002px;
			margin-left: -42px;
			display: flex;
		}
	}
	:deep(.search .content .left) {
		margin: 20px 0;
	}
}
</style>
